import { MdArrowBackIosNew } from 'react-icons/md';
import { PageContainer as Page } from '@ant-design/pro-components';
import styled from '@emotion/styled';
import { useKeyPress } from 'ahooks';
import { Access } from 'umi';

import { GhostLink } from '@/components/base';
import NoPermission from '@/components/NoPermission';

const PageContainer = (props) => {
  const { backUrl, accessible = true, ...pageProps } = props;
  useKeyPress('j', () => {
    scrollBy({
      top: 100,
      left: 0,
      behavior: 'smooth',
    });
  });
  useKeyPress('k', () => {
    scrollBy({
      top: -100,
      left: 0,
      behavior: 'smooth',
    });
  });

  let goback = false;

  if (backUrl !== undefined) {
    goback = () => (
      <GhostLink
        to={backUrl}
        style={{ margin: '11px 4px 0 0 ', float: 'left' }}
      >
        <MdArrowBackIosNew size={16} />
      </GhostLink>
    );
  }

  const restProps = pageProps ? pageProps : {};
  return (
    <Access accessible={accessible} fallback={<NoPermission />}>
      <Page breadcrumbRender={goback} fixedHeader {...restProps}>
        {props.children}
        <FooterDiv>
          <span style={{ fontSize: '12px', color: 'lightgrey' }}>
            -这里是底线-
          </span>
        </FooterDiv>
      </Page>
    </Access>
  );
};

const FooterDiv = styled.div`
  margin-top: 24px;
  height: 56px;
  text-align: center;
`;

export default PageContainer;
